<template>
	<view class="g-banner">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item in bannerList" :key="item.id">
				<image :src="item.url" style="width: 100%;"></image>
			</swiper-item>
		</swiper>
	</view>
	<view class="g-grid">
		<uni-grid :column="5" :highlight="true" @change="change">
			<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
				<view class="grid-item-box" style="background-color: #fff;">
					<image :src="item.url" mode="aspectFill" style="width: 50px;height: 50px;"></image>
					<view class="text">{{item.text}}</view>
				</view>
			</uni-grid-item>
		</uni-grid>
		
	</view>
	<view class="g-product-list">
		<view v-for="item in productList" :key="item.id">
			<ProductItem :product="item" @click="onProductDetail"></ProductItem>
		</view>

	</view>
</template>

<script setup>
	import {categoryList} from '@/api/category.js'
	import ProductItem from '@/components/ProductItem.vue'
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		RequestBanner,
		RequestProduct
	} from '@/api/product'
	import {
		onPullDownRefresh,
		onLoad,
		onReady,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	const bannerList = ref([]) //banner列表
	let pageNo = 1 //当前页号
	let pageSize = 10 //每页记录条数
	let productList = ref([]) //商品列表
	let totalNum = 0
	let list = ref([])
	
	
	/**
	 * 获取banner
	 */
	const getBanner = async () => {
		let data = await RequestBanner()
		let {
			resultCode,
			resultInfo
		} = data
		if (resultCode == 1) {
			bannerList.value = resultInfo.list
		}
	}

	/**
	 * 商品列表
	 */
	const getProductList = async () => {
		let data = await RequestProduct(pageNo, pageSize)
		let {
			resultCode,
			resultInfo
		} = data
		if (resultCode == 1) {
			totalNum = resultInfo.totalNum
			productList.value = resultInfo.list
		}
	}
	/**
	 * 商品详情
	 */
	const onProductDetail = () => {
		uni.navigateTo({
			url: '../product/product'
		})
	}

	onLoad(() => {
		console.log('onLoad >>>');
	})

	onMounted(() => {
		getBanner()
		getProductList()
		list.value = categoryList
	})

	onPullDownRefresh(() => {
		console.log('开始刷新>>>');
		setTimeout(() => {
			uni.stopPullDownRefresh()
			console.log('停止刷新>>>');
		}, 1000)
	})
</script>

<style scoped>
.g-grid{
	margin: 20px 0;
}
.g-product-list{
	margin-top: 20px;
}
</style>
